<!--
 * @Description: 更新日志
 * @Author: YSKM
 * @Date: 2023-06-08 14:30:00
-->
<template>
  <el-card
    class="card"
    shadow="never"
  >
    <el-timeline>
      <el-timeline-item
        v-for="(item, index) in retList"
        :key="index"
        :timestamp="dayjs(item.publishDate).format('YYYY-MM-DD')"
        placement="top"
        type="primary"
        :icon="MoreFilled"
        :hollow="true"
      >
        <el-collapse accordion>
          <el-collapse-item :title="item.subject" :name="index">
            <template #title>
              {{ item.subject }}
            </template>
            <p v-for="(sigle, i) in compact(split(item.content, '\n'))" :key="i">
              {{ sigle }}
            </p>
          </el-collapse-item>
        </el-collapse>
        <!-- <el-card>
          <h4>{{ item.subject }}</h4>
          <p v-for="(sigle, i) in compact(split(item.content, '\n'))" :key="i">
            {{ sigle }}
          </p>
        </el-card> -->
      </el-timeline-item>
    </el-timeline>
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { MoreFilled } from '@element-plus/icons-vue'
import { getVersionListApi } from '@/api/admin'
import { Page } from '@/types/storeModule'
import { split, compact, filter } from 'lodash-es'
import dayjs from 'dayjs'

const retList = ref<[]>()
const page = ref<Page>({
  currentPage: 1,
  pageSize: 5,
  sortField: 'v.publish_date',
  order: 'desc'
})
const getVersionListFunc = async () => {
  const data = await getVersionListApi({ page: page.value, entity: { dataStatus: 1 } })
  retList.value = filter(data.result, (o) => {return o.dataStatus == 1})
}
getVersionListFunc()

</script>

<style scoped>

:deep(.el-card__body) {
  color: #909399;
}
</style>

